<template>
	<view>
		<view class=" content">
			<image class="logo" :src="logo" mode=""></image>
			<uv-input :customStyle="custom" placeholderClass="placeholderClass" class="inputbox" placeholder="请输入手机号码"
				:border="none" v-model="account">
				<!-- vue3模式下必须使用v-slot:prefix -->
				<template v-slot:prefix>
					<image style="width: 35rpx;margin-right: 10rpx;height: 35rpx; " src="/static/images/2.png" mode="">
					</image>
				</template>
			</uv-input>
			<uv-input :customStyle="custom" placeholderClass="placeholderClass" class="" placeholder="请输入密码"
				:border="none" type="password" v-model="password">
				<!-- vue3模式下必须使用v-slot:prefix -->
				<template v-slot:prefix>
					<image style="width: 35rpx;margin-right: 10rpx;height: 35rpx;" src="/static/images/3.png" mode="">
					</image>
				</template>
				<template v-slot:suffix>
					<text @click="toFindpwd"
						style="font-size: 26rpx;opacity: .5; color: #49806F;margin-right: 30rpx;">忘记密码</text>
				</template>
			</uv-input>
			<button class="submit" @click="login">登录</button>
			<view class="register" @click="register">
				注册
			</view>
		</view>
		<view class="xy align-center justify-center">
			<uv-checkbox-group v-model="checked">
				<uv-checkbox shape="circle" :customStyle="{
				'margin':'0 auto'
			}" activeColor="#49806F" name="apple" label="">
					<template #default>
						<view class="align-center justify-center ft13" style="color: #999;">
							我已阅读并接受<text @click.stop="toxy(3)" style="color: #49806F;">《用户协议》</text> 及<text
								@click.stop="toxy(2)" style="color: #49806F;">《隐私协议》</text>
						</view>
					</template>

				</uv-checkbox>
			</uv-checkbox-group>
		</view>


	</view>
</template>

<script>
	import operate from '@/common/operate.js'
	export default {
		data() {
			return {
				account: "",
				custom: {
					'width': '630rpx',
					'height': '86rpx',
					'background': '#F5F5F5',
					'border-radius': '43rpx',
					'padding-left': '40rpx',
					'margin': " 0 auto 30rpx"
				},
				password: "",
				checked: [],
				placeholderStyle: {

				},
				logo: ""
			}
		},
		onLoad() {
			this.$api.config().then(res => {
				console.log(res)
				this.logo = res.data.logo
			})
			uni.removeStorageSync('logintoken')
			// this.getSessionKey()  
		},
		mounted() {
			// this.$refs.popup.open()
		},
		methods: {
			async getSessionKey() {
				let vm = this
				uni.login({
					provider: 'weixin',
					"onlyAuthorize": true,
					success: async function(data) {
						await vm.$api.getOpenid({
							code: data.code
						}).then(res => {
							if (res.code == '200' && res.data) {
								vm.form.openid = res.data.openid
							}
						})

					},
					fail: function(err) {
						reject()
						console.log('登录授权失败', err.code)
					},
				});
			},
			login() {
				if (!this.account) return this.$utils.msg('请输入手机号码')
				if (!this.$utils.checkStr(this.account, 'mobile')) return this.$utils.msg('请输入正确的手机号码')
				if (!this.password) return this.$utils.msg('请输入密码')
				if (!this.checked.length) return this.$utils.msg('请阅读并勾选用户协议及隐私协议')
				this.$api.login({
					account: this.account,
					password: this.password
				}).then(res => {

					if (res.code == 1) {
						uni.setStorageSync('logintoken', res.data.userinfo.token)
						uni.setStorageSync('userInfo', res.data.userinfo)
						uni.showToast({
							title: '登录成功',
							duration: 1500,
							complete: function() {
								uni.switchTab({
									url: '/pages/tabbar/index'
								})
							}
						})
					} else {
						this.$utils.msg(res.msg)
					}
				})

			},
			register() {
				uni.navigateTo({
					url: '/pages/register/index'
				})
			},

			toxy(type) {
				uni.navigateTo({
					url: '/pages/about/index?type=' + type
				})
			},
			toFindpwd() {
				uni.navigateTo({
					url: '/pages/findPwd/index'
				})
			}



		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.logo {
		width: 241rpx;
		display: block;
		height: 90rpx;
		margin: 116rpx auto 110rpx;
	}

	.content {
		padding-top: 150upx;

	}

	.avatar-box {
		width: 96rpx;
		height: 96rpx;
		background: transparent;
		border: none;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		&::after {
			display: none;
		}
	}

	.title {
		font-size: 32rpx;
		text-align: center;
		margin: 30rpx auto 60rpx;
		font-weight: 600;
	}

	.submit {
		width: 630rpx;
		height: 90rpx;
		background: #49806F;
		border-radius: 45rpx;
		margin: 56rpx auto 36rpx;
		font-weight: 500;

		font-size: 34rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
	}

	.inputbox {
		width: 630rpx;
		height: 86rpx;
		background: #F5F5F5;
		border-radius: 43rpx;

		image {
			width: 35rpx;
		}
	}

	/deep/.placeholderClass {
		font-size: 30rpx;
		color: #B5BABF
	}

	.register {
		font-weight: 500;
		font-size: 34rpx;
		color: #999999;
		text-align: center;
	}

	.xy {

		position: fixed;
		bottom: 100rpx;
		left: 0;
		right: 0;
		margin: auto;

		text {}
	}
</style>